<template>
  <BasicTable :columns="columns" :data-source="tableData" :scroll="{ x: 1500 }">
    <template #bodyCell="{ column, record }">
      <template v-if="column.key === 'resource_type'">
        <a-tooltip placement="top" color="#fff">
          <template #title>
            {{ selectValueFormatter(RESOURCE_TYPE, record.resource_type) }}
          </template>
          <div class="ellipsis-text">{{ selectValueFormatter(RESOURCE_TYPE, record.resource_type) }}</div>
        </a-tooltip>
      </template>

      <template v-if="column.key === 'content_type'">
        <a-tooltip placement="top" color="#fff">
          <template #title>
            {{ selectValueFormatter(CONTENT_TYPE, record.content_type) }}
          </template>
          <div class="ellipsis-text">{{ selectValueFormatter(CONTENT_TYPE, record.content_type) }}</div>
        </a-tooltip>
      </template>

      <template v-if="column.key === 'task_rule'">
        <a-tooltip placement="top" color="#fff">
          <template #title>
            {{ getTimeRule(record) }}
          </template>
          <div class="ellipsis-text">{{ getTimeRule(record) }}</div>
        </a-tooltip>
      </template>
      <template v-if="column.key === 'collect_time'">
        {{ getTime(record.collect_time * 1000 + '') }}
      </template>

      <!--
        <template v-if="column.key === 'next_collect_time'">
        {{ getTime(record.next_collect_time) }}
      </template>
       -->

      <template v-if="column.key === 'status'">
        <CollectState :value="record.status" :collectState="COLLECT_START_STATE" />
      </template>
      <span v-if="column.key === 'operationBar'" class="operation-bar">
        <template v-if="isCollectVisible(record.status)">
          <a-button type="link" @click="handleStopCollect(record.id)">停止采集</a-button>
          <a-divider type="vertical" />
        </template>
        <template v-else>
          <a-button type="link" @click="startOrDisabledHandle(record)">{{
            startOrDisabledBtnText(record.status)
          }}</a-button>
          <a-divider type="vertical" />
        </template>
        <a-button type="link" :disabled="isCollectVisible(record.status)" @click="toEditPage(record.id)"
          >编辑<a-divider type="vertical" />
        </a-button>
        <a-button type="link" :disabled="isCollectVisible(record.status)" @click="handleDeleteTask(record)"
          >删除</a-button
        >
      </span>
    </template>
  </BasicTable>
  <!-- 启用禁用弹窗 -->
  <ModalView
    title="提示"
    v-model:visible="modalVIsible"
    okText="确定"
    cancelText="取消"
    :width="458"
    @confirm="disableConfirm"
    @cancel="disableCancel"
  >
    <span>{{ `确定要${currentRecord && currentRecord.status === 2 ? '启用' : '禁用'}该定时任务吗？` }}</span></ModalView
  >
  <!-- 删除弹窗 -->
  <ModalView
    title="提示"
    v-model:visible="deleteVisible"
    okText="确定"
    cancelText="取消"
    :width="458"
    @confirm="deleteConfirm"
    @cancel="deleteCancel"
  >
    <span>确定要刪除该定时任务吗？</span></ModalView
  >
  <!-- 停止采集弹窗 -->
  <ModalView
    title="提示"
    v-model:visible="collectVisible"
    okText="确定"
    cancelText="取消"
    :width="458"
    @confirm="stopConfirm"
    @cancel="stopCancel"
  >
    <span>确定要停止采集吗？</span></ModalView
  >
</template>

<script lang="ts" setup name="ResourcesTable">
import BasicTable from '../../../components/BasicTable.vue'
import CollectOperate from '../../../components/collect-operate/index.vue'
import CollectState from '../../../components/CollectState.vue'
import { useRouter } from 'vue-router'
import { computed, reactive, ref } from 'vue'
import { formatToDateTime, weekDay } from '@/utils/format'
import {
  RESOURCE_TYPE,
  CONTENT_TYPE,
  COLLECT_START_STATE,
  selectValueFormatter,
  COLLECT_DATE_RULE
} from '@/stores/modules/collect-manage/select-data-source'
import { getTableData, tableData } from '../../../hooks/useTable'
import ModalView from '@/components/components/modal/ModalView.vue'
import {
  stopCollectFunc,
  startOrDisableStatus,
  deleteResourceSite,
  setStartOrDisableRequestApi,
  modalVIsible,
  deleteVisible,
  collectVisible,
  setDeleteRequestApi,
  setStopCollectRequestApi
} from '../../../public-handle'
import apis from '@/apis'
const { updateTaskStatusSingle, deleteCollectTaskSingle, stopTaskCollect } = apis.collectManage
getTableData()

const router = useRouter()

const columns = [
  {
    title: '任务ID',
    dataIndex: 'id',
    key: 'id'
  },
  {
    title: '任务名称',
    dataIndex: 'task_name',
    key: 'task_name'
  },
  {
    title: '资源类型',
    dataIndex: 'resource_type',
    key: 'resource_type'
  },
  {
    title: '内容类型',
    dataIndex: 'content_type',
    key: 'content_type'
  },
  {
    title: '定时规则',
    dataIndex: 'task_rule',
    key: 'task_rule'
  },
  {
    title: '最近采集时间',
    dataIndex: 'collect_time',
    key: 'collect_time'
  },
  // {
  //   title: '下次采集时间',
  //   dataIndex: 'next_collect_time',
  //   key: 'next_collect_time'
  // },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status'
  },
  {
    title: '操作',
    key: 'operationBar',
    fixed: 'right'
  }
]

type StatusType = number

// 停止采集
const isCollectVisible = computed(() => (status: StatusType) => status === 3)

// 启用/禁用
const startOrDisabledBtnText = computed(() => (status: StatusType) => {
  switch (status) {
    case 1:
      return '禁用'
    case 2:
      return '启用'
  }
})
const currentRecord = ref()
//禁用启用
const startOrDisabledHandle = (record: any) => {
  if (record.status === 2) {
    setStartOrDisableRequestApi(updateTaskStatusSingle)
    startOrDisableStatus(record.status, record.id, '定时任务')
  } else {
    modalVIsible.value = true
    currentRecord.value = record
  }
}
//禁用确认
const disableConfirm = (value: any) => {
  setStartOrDisableRequestApi(updateTaskStatusSingle)
  startOrDisableStatus(currentRecord.value.status, currentRecord.value.id, '定时任务')
  // @click="startOrDisableStatus(record.status, record.taskId, '定时任务')"
}

// 编辑
const toEditPage = (id: string) => {
  console.log('id: ', id)
  router.push({ name: 'AddEditTimedTaskForm', query: { id } })
}
//禁用取消
const disableCancel = () => {
  modalVIsible.value = false
}
//getMonthRule
const getMonthRule = (date: string) => {
  return date?.replace(/,/g, '/') + '日' ?? ''
}
//获取定时规则
const getTimeRule = computed(() => (item: any) => {
  if (item.task_rule === 1) {
    return COLLECT_DATE_RULE[item.task_rule] + ' ' + item.task_time.join('、')
  } else if (item.task_rule === 2) {
    return COLLECT_DATE_RULE[item.task_rule] + ' ' + weekDay(item.collect_date) + ' ' + item.task_time.join('、')
  } else {
    return COLLECT_DATE_RULE[item.task_rule] + ' ' + getMonthRule(item.collect_date) + ' ' + item.task_time.join('、')
  }
})
//删除
const deleteRecord = ref()
const handleDeleteTask = (record: any) => {
  deleteVisible.value = true
  deleteRecord.value = record
}
//删除确认
const deleteConfirm = (value: any) => {
  setDeleteRequestApi(deleteCollectTaskSingle)
  console.log('deleteRecord.value.id: ', deleteRecord.value.id)
  deleteResourceSite(deleteRecord.value.id, '定时任务')
}
//删除取消
const deleteCancel = () => {
  deleteVisible.value = false
}
const stopId = ref()
//停止
const handleStopCollect = (id: string) => {
  collectVisible.value = true
  stopId.value = id
}
//停止采集确认
const stopConfirm = (value: any) => {
  setStopCollectRequestApi(stopTaskCollect)
  stopCollectFunc(stopId.value)
}
//停止采集取消
const stopCancel = () => {
  collectVisible.value = false
}
//获取时间
const getTime = computed(() => (time: string) => {
  return time && time != '0' ? formatToDateTime(+time) : '-'
})
</script>

<style lang="less" scoped>
.operation-bar {
  .ant-btn-link {
    padding: 4px 0px;
  }
}
:deep(.ellipsis-text) {
  max-width: 170px !important;
  white-space: nowrap;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer;
}
</style>
